<template>
  <section class="container">
    <el-row type="flex" justify="space-between">
      <!-- 菜单栏和推荐城市模块 -->
      <div class="menus-wrapper">
        <!-- 菜单栏 -->
        <menusBody />
        <!-- 推荐城市 -->
        <asideRecommend />
      </div>
      <div class="post-wrapper">
        <!-- 搜索框 -->
        <searchWrapper />

        <!-- 头部推荐模块和写游记按钮 -->
        <div class="post-title">
          <el-row type="flex" justify="space-between">
            <h4>推荐攻略</h4>
            <nuxt-link to="/post/publishArticle">
              <el-button type="primary" icon="el-icon-edit"> 写游记 </el-button>
            </nuxt-link>
          </el-row>
        </div>
        <!-- 文章列表 -->
        <postList />
        <!-- 分页组件 -->
      </div>
    </el-row>
  </section>
</template>

<script>
import menusBody from "@/components/post/menusBody";
import asideRecommend from "@/components/post/asideRecommend";
import searchWrapper from "@/components/post/searchWrapper";
import postList from "@/components/post/postList";
import { postList as getPostList } from "@/utils/apis/post"
import bus from '@/components/post/utils/postBus'

export default {
  components: {
    menusBody,
    asideRecommend,
    searchWrapper,
    postList,
  },
  async mounted () {
    let { city } = this.$route.query

    if (city === '') {
      city = undefined
    }

    const res = await getPostList({ city })

    bus.$emit('postList', res)
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
  .menus-wrapper {
    position: relative;
    width: 260px;
    z-index: 2;
  }
  .post-wrapper {
    width: 700px;
    // background-color: skyblue;
    .post-title {
      // padding-bottom: 10px;
      border-bottom: 1px solid #eee;
      position: relative;
      h4 {
        font-weight: 400;
        font-size: 18px;
        color: orange;
        padding-top: 8px;
        &::after {
          display: block;
          content: "";
          width: 72px;
          height: 2px;
          background: orange;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
      button {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
